import React, { useState,useEffect } from "react";
import { Popover,Empty, message } from "antd";
import { CaretDownOutlined } from "@ant-design/icons";
import {  Upload } from 'antd';
import type { GetProp, UploadFile, UploadProps,Modal } from 'antd';
import { UploadChangeParam } from "antd/es/upload";
import axios from 'axios'
import "./style.css";
const Index: React.FC = () => {
  const content = (
    <div style={{ background: "#1b2138", color: "white", padding: "10px" }}>
      <p>图片:20MB以内，png、jpeg、svg格式</p>
      <p>动图:5MB以内，gif格式</p>
      <p>视频:100MB、3分钟以内，mp4格式</p>
      <p>音频:20MB、5分钟以内，mp3格式</p>
    </div>
  );
  const contenttow = (
    <div>
      <p>上传素材</p>
      <p>从手机上传</p>
      <p>新建文件夹</p>
    </div>
  );

  

  const [query, setQuery] = useState<string>("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };
  
const [activeTab, setActiveTab] = useState('图片');
  const tabs = ['图片', '视频', '音频'];

  const handleSearch = () => {
    // 在这里可以处理搜索逻辑
    console.log(`搜索内容: ${query}`);
  };

  const [FileUrls, setFileUrls] = useState<string[]>([]);

 const changeFile = (info: UploadChangeParam<UploadFile<any>>) => {
    //response服务端响应内容
    const { response } = info.file;
    console.log(info,3232342423);
    
    if (response) {
      //获取到后端响应信息
      const { code, msg, data } = response;
      if (code === 200) {
        message.success(msg);
        setFileUrls((urls) => {
          return [...urls, data];
        });
      }
    }
  };


  

  useEffect(() => {
    
  }, []);

  return (
    <div className="upload">
      <div className="uploadTops">
        <h3>我的上传</h3>
        <Upload.Dragger
        multiple
        method="POST"
        action="/api/koaupload"
        onChange={changeFile}
        itemRender={() => ""}
      >
        <div className="buttons">
          <Popover
            content={content}
            placement="bottomLeft"
            title="上传格式支持:"
          >
            <button className="but">上传素材</button>
          </Popover>
          <Popover placement="bottomLeft" content={contenttow}>
            <button>
              <CaretDownOutlined />
            </button>
          </Popover>
        </div>
        </Upload.Dragger>
      </div>
      <div className="search-bar">
        <input
          type="text"
          value={query}
          onChange={handleChange}
          placeholder="搜索素材"
          className="search-input"
        />
        <button onClick={handleSearch} className="search-button">
          搜索
        </button>
      </div>
      <div className="tabSwitch">
        <div className="tabSwitchBut">
          {tabs.map(tab => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={activeTab === tab ? 'active' : ''}
          >
            {tab}
          </button>
        ))}
        </div>
        <div>
          {activeTab === '图片' && <div>&nbsp;&nbsp;资源 {
            FileUrls.length>0 && FileUrls.map((item,ind)=>(
              <div key={ind}>
                <img src={item} alt="" />

              </div>
            ))
            }<div><Empty /></div></div>}
        {activeTab === '视频' && <div>&nbsp;&nbsp;资源 {0}<div><Empty /></div></div>}
        {activeTab === '音频' && <div>&nbsp;&nbsp;资源 {0}<div><Empty /></div></div>}
        </div>
      </div>
    </div>
  );
};

export default Index;
